import { history } from '@@/core/history';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { DatePicker, Tag } from 'antd';
import type { SorterResult } from 'antd/es/table/interface';
import React, { useRef, useState } from 'react';
import type { SpaceFinanceListItem } from './data';
import { querySpaceFinancePageList } from './service';

const TableList: React.FC<{}> = (props: any) => {
  const [sorter, setSorter] = useState<string>('');
  const actionRef = useRef<ActionType>();

  const showIncomeHistory = (record: SpaceFinanceListItem) => {
    const { id } = record;
    history.push(`/finance/space-income-statistics/income-history?id=${id}`);
  };

  const columns: ProColumns<SpaceFinanceListItem>[] = [
    {
      title: '车位号',
      dataIndex: 'spaceNo',
      hideInSearch: true,
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      renderFormItem: (_, { onChange }) => (
        <DatePicker
          format="YYYY-MM-DD"
          onChange={(value) => {
            if (onChange) {
              onChange(value);
            }
          }}
        />
      ),
    },
    {
      title: '截止时间',
      dataIndex: 'endTime',
      renderFormItem: (_, { onChange }) => (
        <DatePicker
          format="YYYY-MM-DD"
          onChange={(value) => {
            if (onChange) {
              onChange(value);
            }
          }}
        />
      ),
    },
    {
      title: '费用类型',
      dataIndex: 'type',
      hideInSearch: true,
      render: (_, record) => {
        if (record.type === 0) {
          return '共享停车';
        }
        return '临时停车';
      },
    },
    {
      title: '总计收入',
      dataIndex: 'balance',
      hideInSearch: true,
      render: (_, record) => <Tag>{(record.balance / 100.0).toFixed(2)} 元</Tag>,
    },
    {
      title: '待收费用',
      dataIndex: 'waitBalance',
      hideInSearch: true,
      render: (_, record) => <Tag>{(record.waitBalance / 100.0).toFixed(2)} 元</Tag>,
    },
    {
      title: '操作',
      dataIndex: 'option',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <div>
            <a onClick={() => showIncomeHistory(record)}>收益记录</a>
          </div>
        );
      },
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<SpaceFinanceListItem>
        actionRef={actionRef}
        rowKey="id"
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<SpaceFinanceListItem>;
          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        params={{
          sorter,
        }}
        tableAlertRender={() => false}
        request={(params = {}) => {
          const { current: page, pageSize, ...filter } = params;
          const { ownerId } = props.match.params;
          return querySpaceFinancePageList({
            page,
            pageSize,
            ownerId,
            ...filter,
          });
        }}
        columns={columns}
        rowSelection={false}
      />
    </PageHeaderWrapper>
  );
};

export default TableList;
